<template>
	<view class="page">
		<scroll-view show-scrollbar="true" scroll-y="true" :style="{ marginTop: navbarHeight + 'px' }"
			@scrolltolower="loadMore">
			<view class="box" @click="updateStatus(item.id)" v-for="(item,index) in list" style="margin-top: 1rem;">
				<view class="">
					{{ item.notification.message }}
				</view>
				<view class="dot" v-if="item.status==0">

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				navbarHeight: 0,
				totalPage: 1,
				list: [],
				currentPage: 1
			}
		},
		mounted() {
			this.loadData()
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		methods: {
			async updateStatus(Nid) {
				const param = {
					userId: this.userId,
					status: "1",
					id: Nid
				};
				const res = await this.$request.post('/system/notification-user/updateStatus', param);

				if (res.code === 200) {
					this.list.forEach(item => {
						if (item.id === Nid) {
							item.status = "1";
						}
					});
				    uni.navigateTo({
				    	url:`/pages/tabBar/my/notification/defail/defail?id=${Nid}`
				    })
				}
			
			},
			async loadData() {
				const param = {
					userId: this.userId,
					current: this.currentPage,
					size: 10
				};
				const res = await this.$request.get('/system/notification-user/list', param);

				if (res.code === 200) {
					this.list = this.list.concat(res.data.list.records);
					this.totalPage = res.data.list.pages;
					console.log(this.winelist);
				}
			},
			loadMore() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
					this.loadingMore = true;
					this.loadData();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100% !important;

		.box {
			position: relative;
			padding: 1rem 0.5rem;
			border-radius: 0.3rem !important;
			margin-top: 1rem;

			.dot {
				position: absolute;
				top: 1rem;
				right: 1rem;
				width: 19rpx;
				height: 19rpx;
				border-radius: 50%;
				background-color: red;
			}
		}
	}
</style>